body {
  background-color: rgb(27, 28, 32);
}

.canvas-wrapper {
  position: relative;
}

.canvas-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(
    ellipse 120% 120% at 50% 65%,
    rgb(255, 110, 255),
    rgb(0, 183, 255)
  );
  mix-blend-mode: hue;
  pointer-events: none;
}

.canvas-wrapper2 {
  position: relative;
}

#canvas2 {
  position: absolute;
  top: 0;
  left: 0;
}

.background0 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-color: rgb(0, 0, 0);
  background-size: contain;
}

.background1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: url("../images/background1c1.png");
  background-size: contain;
  animation: opacityChangeB 5s linear infinite;
}

.background1b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: url("../images/background1c2.png");
  background-size: contain;
  animation: opacityChangeB 5s linear infinite;
  animation-delay: 1.5 1s;
}

@keyframes opacityChangeB {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.45;
  }
  100% {
    opacity: 1;
  }
}

.background3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("../images/background3a.png");
  background-size: contain;
  animation: opacityChange 8s ease infinite;
}
@keyframes opacityChange {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

.background4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url("../images/sundisc1.png");
  background-size: contain;
  filter: blur(40px);
  animation: blurChange 10s linear infinite;
}

@keyframes blurChange {
  0% {
    filter: blur(40px);
  }
  25% {
    filter: blur(50px);
  }
  50% {
    filter: blur(55px);
  }
  75% {
    filter: blur(50px);
  }
  100% {
    filter: blur(40px);
  }
}
.initial {
  opacity: 0;
}

.fadeIn {
  animation: fadeIn 0.2s ease-in;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}